import { defineComponent, h, ref, Transition, VNode, watchEffect } from 'vue';
import { RouteLocationNormalizedLoaded, RouterView, useRoute, useRouter } from 'vue-router';
import s from "./Welcom.module.scss"
import logo from "../assets/icons/logo.png"
import { useSwipe } from '../hooks/useSwipe';
import { throttle } from '../shared/throttle';
const pushMap: Record<string, string> = {
    'Welcom1': '/welcom/2',
    'Welcom2': '/welcom/3',
    'Welcom3': '/welcom/4',
    'Welcom4': '/start',
}
export const Welcom = defineComponent({
    setup(props, context) {
        const main = ref<HTMLElement>()
        const route = useRoute() //路由信息
        const router = useRouter()//路由器
        const { direction, swiping } = useSwipe(main,)
        const push = throttle(() => {
            const name = (route.name || 'welcom1').toString()
            router.push(pushMap[name])
        }, 500)

        watchEffect(() => {
            if (swiping.value && direction.value === 'left') {
                push()
            }
        })
        useSwipe(main)
        //ref引用到main,把main传给useSwipe
        return () => <div class={s.wrapper}>
            <header>
                <img src={logo} />
                <h1>山竹记账</h1>
            </header>
            <main class={s.main} ref={main}>
                {/* 关联useSwipe */}
                <RouterView name="main">
                    {/* {(obj: any) => <Transition name="slide-fade"><obj.Component /> </Transition>} */}
                    {({ Component: X, route: R }: { Component: VNode, route: RouteLocationNormalizedLoaded }) =>
                        //解构 obj: any       ：                 类型定义
                        <Transition
                            enterFromClass={s.slide_fade_enter_from}
                            enterActiveClass={s.slide_fade_enter_active}

                            leaveToClass={s.slide_fade_leave_to}
                            leaveActiveClass={s.slide_fade_leave_active}>
                            {X}
                        </Transition>
                    }
                </RouterView>
            </main>
            <footer class={s.footer}>
                <RouterView name="footer" />
            </footer>
        </div>
    }
})